'use client';

import type { IQueryPostDetails } from '@/interfaces';
import useContentLayer from '@/hooks/useContentLayer';
import { useContext } from 'react';
import { PostAdminContext } from '@/contexts/admin/forum/post';
import Nodata from '@/app/[locale]/common/nodata/nodata';

export default function QueryPostContent({
  details,
}: {
  details: IQueryPostDetails;
}) {
  const context = useContext(PostAdminContext);
  const metadata = context.metadata!;
  const content = details.content || '';

  useContentLayer({
    dep: content,
    metadata,
  });

  return (
    <div content="row">
      <div content="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-card-text me-2"></i>
            内容
          </div>
          <div className="card-body">
            {content && (
              <div
                className="clearfix content-layer text-break"
                dangerouslySetInnerHTML={{ __html: content }}
              ></div>
            )}

            {!content && <Nodata />}
          </div>
        </div>
      </div>
    </div>
  );
}
